<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>二维码</title>
</head>
<body style="background: #000000">
    <div style="width: 200px; height: 200px;  background: #ffffff; margin: auto; margin-top: 10%;">
        <img src="{:url('abc')}" style="width: 200px; height: 200px;" alt="二维码">
    </div>
</body>
</html>

<!-- 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>二维码</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .qr-container {
                box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
                transition: transform 0.3s ease;
            }
            .qr-container:hover {
                transform: scale(1.02);
            }
        }
    </style>
</head> -->
<!-- <body class="bg-black min-h-screen flex flex-col items-center justify-center p-4">
    <div class="text-white text-center mb-6">
        <h1 class="text-2xl md:text-3xl font-bold mb-2">扫描二维码</h1>
        <p class="text-gray-300">请使用微信或其他扫码工具扫描下方二维码</p>
    </div>
    
    <div class="qr-container bg-white p-4 rounded-lg mb-6">
        <div class="relative w-64 h-64 md:w-72 md:h-72">
            二维码图像
            <img src="{:url('abc')}" alt="二维码" class="w-full h-full object-contain" onerror="this.src='https://picsum.photos/280/280?grayscale&blur=2'; this.alt='二维码加载失败'">
            
            加载状态
            <div id="loading" class="absolute inset-0 flex items-center justify-center bg-white bg-opacity-80">
                <i class="fa fa-spinner fa-spin text-primary text-3xl"></i>
            </div>
        </div>
    </div>
    
     <div class="text-white text-center">
        <button id="refreshBtn" class="bg-primary hover:bg-primary/90 text-white font-medium py-2 px-6 rounded-md transition-all duration-300 flex items-center mx-auto">
            <i class="fa fa-refresh mr-2"></i> 刷新二维码
        </button>
        <p class="mt-4 text-sm text-gray-400">二维码有效期：5分钟</p>
    </div>

    <script>
        // 二维码加载完成后隐藏加载状态
        document.querySelector('img').onload = function() {
            document.getElementById('loading').style.display = 'none';
        }
        
        // 刷新按钮功能
        document.getElementById('refreshBtn').addEventListener('click', function() {
            const img = document.querySelector('img');
            const originalSrc = img.src.split('?')[0];
            img.src = originalSrc + '?t=' + new Date().getTime(); // 添加时间戳防止缓存
            document.getElementById('loading').style.display = 'flex';
            
            // 重置错误状态
            img.onerror = function() {
                this.src = 'https://picsum.photos/280/280?grayscale&blur=2';
                this.alt = '二维码加载失败';
                document.getElementById('loading').style.display = 'none';
            }
        });
        
        // 倒计时功能（示例）
        let countdown = 300; // 5分钟
        const countdownEl = document.createElement('div');
        countdownEl.className = 'text-white mt-3 text-sm';
        document.querySelector('.text-center').appendChild(countdownEl);
        
        function updateCountdown() {
            const minutes = Math.floor(countdown / 60);
            const seconds = countdown % 60;
            countdownEl.textContent = `剩余时间: ${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
            
            if (countdown <= 0) {
                countdownEl.textContent = '二维码已过期，请刷新';
                countdownEl.classList.add('text-red-500');
                return;
            }
            
            countdown--;
            setTimeout(updateCountdown, 1000);
        }
        
        updateCountdown();
    </script>
</body>
</html>   -->